<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function selectTest1(){
    //select 객체 조회
    var monthSel = document.form1.month;
    //선택된 옵션의 index 조회(몇번째 것이 선택되었는지)
    alert("선택된 option의 index : " + monthSel.selectedIndex);
    //select 객체 내의 모든 optino 객체들을 조회 - select객체.options -> 배열
    var options = monthSel.options;
    //모든 option의 : value - text - 선택 여부(selected)
    for(var i=0; i<options.length; i++){
       //alert(options[i].value + " - " + options[i].text + " - " + options[i].selected);
    }
 }
 function selectTest2(){
    //월이 선택된 상태이면 전송을 하고 "월을 선택하세요."가 선택되면 전송하지 않도록 처리.
    var monthSel = document.form1.month;
    if(monthSel.selectedIndex){
       document.form1.submit();
    }else{
       alert("폼을 전송하십시오.");
    }
 }

function selectTest3(){
	//선택된 option의 value-text
	var monthSel = document.form1.month;
	var options = monthSel.options;
	alert(options[monthSel.selectedIndex].value + "-" + options[monthSel.selectedIndex].text);
}
</script>
</head>
<body>
<form name="form1" action="a.jsp">
<!-- onchange : 선택 항목이 바뀔 때 마다 발생하는 event(change이벤트) 핸들러 -->
<select name ="month" onchange="selectTest1();">
<option> 월을 선택하세요</option>
<option value="1">1월</option>
<option value="2">2월</option>
<option> 3월 </option>
<option> 4월 </option>
<option> 5월 </option>

</slect>
<input type = "button" value="전송" onclick="selectTest2()">
<input type = "button" value="선택된 월의 값 출력" onclick="selectTest3()">

</form>
</body>
</html>